<template>
	<view class="container">
	  <!-- 头部登录提示 -->
	  <!-- <view class="login-header">
	    <text class="login-text">立即登录</text>
	    <text class="sub-text">登录后享受多物业服务</text>
	  </view> -->
	
	<block v-for="(item, index) in dataList" :key="index">
		<carousel  v-if="item.type == 'carousel'" :res="item.list" :listStyle="item.style"/>
		<menuSingleOne v-if="item.type == 'menuSingleOne'"  :res="item.data" :listStyle="item.style"/>
		<menuLayout v-if="item.type == 'menu'" :res="item.list" :listStyle="item.style"/>
	</block>
	  <!-- 开门码区域 -->
	  <view class="qrcode-section">
	    <text class="section-title">开门码</text>
	    <view class="qrcode-box">
        <image src="/static/banner/1.png" style="width: 100%;height: 100%;border-radius: 16rpx;"/>
      </view>
	  </view>
	
	  <!-- 常用服务网格 -->
	  <view class="service-grid">
      <view v-for="(item, index) in services" :key="index" class="service-item" @click="serviceItem(item)">
        <view class="icon-wrapper">
					<image :src="item.icon" class="icon" style="border-radius: 50%;"/>
          <!-- <uni-icons :type="item.icon" size="30" color="#2a8bf2"></uni-icons> -->
        </view>
        <text class="service-title">{{ item.title }}</text>
        <text class="service-desc">{{ item.desc }}</text>
      </view>
    </view>

		<!-- <view class="mt-50 fs-28 zaozao-flex-center"  style="text-align: center;">
			由杭州木耀科技提供服务
		</view> -->
    <uni-popup ref='devicePopup' type="bottom">
      <view class="zzkj-flex-center device-popup-container" >
        
        <view class="zzkj-flex-center title">
          {{deviceInfo.community_name}}{{deviceInfo.lockname}}
        </view>
				<view style="margin-top:30rpx">
					<image src="/static/alipay.png" style="width:140rpx;height:100rpx"/>
				</view>
				<view class="zaozao-row" style="align-items: center;margin-top:20rpx" v-if="openStatus==true">
					<view style="width:48rpx;height:48rpx">
						<image src="/static/notice.png" style="width:48rpx;height:48rpx"/>
					</view>
					<view style="color:#0079ff;margin-left:20rpx;margin-top:12rpx" class="title">
						{{msg}}
					</view>
				</view>
				<view v-else>
					{{msg}}
				</view>
				<view v-if="openStatus==false&&auditStatus==false" class="zzkj-flex-center " style="margin-top:20rpx">
          <!-- <view class="btn zzkj-flex-center" style="justify-content: center;" @click="strangerSubmit">
            授权门岗管理员
          </view> -->
          <button open-type="getAuthorize"  scope='userInfo'
          @getAuthorize="strangerSubmit"  class="btn zzkj-flex-center">授权门岗管理员</button>
          <!-- <view class="btn zzkj-flex-center" style="justify-content: center;" @click="ownerBind">
            我是业主
          </view>
          <view class="btn zzkj-flex-center" style="margin-left:10rpx;justify-content: center;" @click="visitorBind">
            我是访客
          </view> -->
          <!-- <view style="width: 560rpx;margin:16rpx auto;font-size: 24rpx;">
            授权通过后，下次无需再次提交审核，您的信息已登记备案，作为您进入小区的凭证，请文明通行
          </view> -->
        </view>
				<!-- <view class="mt-50 fs-20">
					技术支持：木耀科技有限公司
				</view>
				<view class="mt-10 fs-20">
					服务电话：0571-88683117
				</view> -->
        <view class="zzkj-flex-center owner-btn" style="" @click="ownerBind()" v-if="openStatus==false">
          我是业主
        </view>
      </view>
    </uni-popup>
	
	 
	</view>
</template>

<script>
	import tpl_banner from "@/pages/index/template/tpl_banner"; //轮播图模块
	import tpl_menu_single_one from "@/pages/index/template/tpl_menu_single_one.vue"; //首页视频直播
	import tpl_menu from "@/pages/index/template/tpl_menu.vue"; //菜单模块
	import tpl_grid from "@/pages/index/template/tpl_grid.vue"; //菜单模块
  import { open ,getInfo} from '@/api/device.js';
  import { getHomeData} from '@/api/index.js';
  import storage from "@/utils/storage.js";
	export default {
    components: {
    	carousel: tpl_banner,
    	menuSingleOne: tpl_menu_single_one,
    	menuLayout:tpl_menu,
			grid:tpl_grid
    },
	data() {
		return {
			deviceid:"",
			deviceInfo:{},
			code :"",
			services: [
			  { icon: '/static/icon/wuyejiaofei.png', title: '生活缴费', desc: '在线缴纳物业费',type:"propertyFee" },
			  { icon: '/static/icon/repairs.png', title: '报修报事', desc: '维修一触即发',type:"" },
			  { icon: '/static/icon/lianxiguanjia.png', title: '联系管家', desc: '一键联系及时响应' ,type:""},
			  { icon: '/static/icon/changyongdianhua.png', title: '常用电话', desc: '随时查找服务电话' ,type:""},
				{ icon: '/static/icon/家庭成员.png', title: '家庭成员', desc: '家庭成员',type:"family", },
			  { icon: '/static/icon/访客通行.png', title: '访客通行', desc: '访客邀约一触即发',type:"visitor" },
        { icon: '/static/icon/访客通行.png', title: '业主认证', desc: '业主认证',type:"ownerBind" },
        { icon: '/static/icon/访客通行.png', title: '家人认证', desc: '家人认证',type:"familyBind" },
			],
      services:[],
			openStatus:false,
			msg:"",
      nickName:"",
      avatar:"",
      auditStatus:false,
		}
	},
    mounted(){
    	let that = this;
      this.getData();
			
    	//获取code
    	// uni.login({
    	// 	success: (res) => {
    	// 		console.log("code", res.code);
    	// 		that.code = res.code;
    	// 		//that.open();
    	// 	},
    	// });
    },
    onLoad(options){
      let qrCode = getApp().globalData.qrCode;
      if (qrCode){
        //支付宝扫描二维码进来的
        let zfbObj = this.getUrlParam(qrCode);
        this.deviceid=zfbObj["id"];
      }else if(options.id){
        this.deviceid=options.id;
        
      }
      if(this.deviceid!=""){
        //this.$nextTick();
        //this.open();
        //this.$refs.devicePopup.open();
        this.getDeviceInfo();
      }
      
      
    },
    onShow() {
    },
		methods: {
      getData(){
      	getHomeData().then((res)=>{
      		if(res.data.code==0){
      			this.services=res.data.data
      		}
      		console.log("getBanner",res);
      	})
      },
      getUserProfileNew(e) {
      	
      },
      strangerSubmit(){
        let that = this;
        uni.getUserProfile({
        	desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        	success: (res) => {
        		console.log("getUserProfile", res);
        		that.nickName = res.userInfo.nickName;
        		that.avatar = res.userInfo.avatarUrl;
            uni.navigateTo({
            	url:`/pages/stranger/submit?id=`+that.deviceid+`&nickName=`+that.nickName+`&avatar=`+that.avatar
            })
            that.$refs.devicePopup.close();
        	},
        	fail: (res) => {
        		console.log("用户信息获取成功");
        		//展示手机号获取授权
        	},
        });
        
      },
      ownerBind(){
        uni.navigateTo({
        	url:`/pages/owner/bindRoom`
        })
      },
      visitorBind(){
        uni.navigateTo({
        	url:`/pages/visitor/verify`
        })
      },
      async getDeviceInfo(){
        let res = await getInfo({id:this.deviceid});
        console.log("getDeviceInfo",res.data);
        if(res.data.code==0){
          this.deviceInfo=res.data.data;
          let that=this;
          
          this.$nextTick(() => {
            //this.$refs.devicePopup.open();
            that.open();
          });
        }else{
          uni.showModal({
            title: '提示',
            content: res.data.msg,
            showCancel:false,
          })
          console.log(res.data.msg);
        }
      },
      serviceItem(item){
        console.log("storage.getHasLogin()",storage.getHasLogin());
        if(item.type=="propertyFee"){
          my.navigateToMiniProgram({
          	appId: "2019032863710519", 
            path:"",
          	success: function (res) {
          		console.log(res);
          	},
          	fail: function (err) {
          		console.log(err);
          	}
          });
          return ;
        }else if(item.type=="ownerBind"){
          uni.navigateTo({
            url:`/pages/owner/bindRoom`
          })
          return ;
        }else if(item.type=="familyBind"){
          uni.navigateTo({
            url:`/pages/family/bindRoom`
          })
          return ;
        }else if(item.type=="mobile"){
          uni.makePhoneCall({
          	phoneNumber: item.mobile //仅为示例
          });
          return ;
        }
        if(storage.getHasLogin()==true){
          if(item.type=="family"){
            uni.navigateTo({
            	url:`/pages/owner/family/index`
            })
          }else if(item.type=="visitor"){
            uni.navigateTo({
            	url:`/pages/owner/visitor/index`
            })
          }
        }else{
          uni.navigateTo({
          	url: "/pages/login/aliMPLogin",
          });
        }
        
        //this.$refs.devicePopup.open("bottom");
      },
      async open() {
        let that=this;
        uni.login({
        	success: async(resu) => {
        		console.log("code", resu.code);
        		that.code = resu.code;
            let res = await open({auth_code:that.code,id:that.deviceid});
            console.log("resopen",res.data);
            if(res.data.code==0){
              console.log("resopen",res);
							that.openStatus=true;//开门成功
							that.msg=res.data.data.msg
              that.$refs.devicePopup.open();
              // uni.showModal({
              // 	title: '提示',
              // 	content: res.data.data.msg,
              //   showCancel:false,
              // });
            }else if(res.data.code==10001){//审核中
							that.auditStatus=true;//开门成功
							that.msg=res.data.msg
              that.$refs.devicePopup.open();
            }else{
							that.msg=res.data.msg;
              that.$refs.devicePopup.open();
              // uni.showModal({
              // 	title: '提示',
              // 	content: res.data.msg,
              //   showCancel:false,
              // });
            }
        	},
        });
        // console.log("code",this.code);
        // let res = await open({auth_code:this.code,id:this.deviceid});
        
      },
      
      
      getUrlParam(url){
         let params = url.split("?")[1].split("&");
         let obj = {};
         params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
         return obj
      },
  
			
		}
	}
</script>

<style scoped lang="less">
.owner-btn{
  position: absolute;
  top:30rpx;
  left:50rpx;  
  width: 160rpx;
  height: 60rpx;
  background: #2169df;
  border-radius: 20rpx;
  font-size: 24rpx;
  color:white;justify-content: center;
}
.btn{
  width: 520rpx;
  height: 94rpx;
  background: #2169df;
  border-radius: 20rpx;
  margin-top:34rpx;
  font-size: 28rpx;
  color:white;
}
.zzkj-flex-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  
  
}
.device-popup-container{
  background-color: #fff;
  padding-top:50rpx;
  padding-bottom:100rpx;
  border-radius: 60rpx 60rpx 0 0;
  width: 750rpx;
  position: relative;
  .title{
	  color:#000;
	  font-size:56rpx;
	  font-weight:600;
  }
}
.btn-open {
  width: 698rpx;
  height: 94rpx;
  background: #0BB9F0;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #FFFFFF;
  justify-content: center;
  margin-top: 50rpx;
}
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.login-header {
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.login-text {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.sub-text {
  color: #888;
  font-size: 24rpx;
}

.qrcode-section {
  background: #fff;
  padding: 30rpx;
  margin: 20rpx 0;
  border-radius: 16rpx;
}

.qrcode-box {
  height: 300rpx;
  background: #eee;
  margin-top: 20rpx;
  border-radius: 8rpx;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .service-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    
    .icon-wrapper {
      margin-bottom: 20rpx;
    }

    .service-title {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }

    .service-desc {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }
}

.icon {
  width: 80rpx;
  height: 80rpx;
  display: block;
  margin: 0 auto 20rpx;
}

.sub {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.function-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.list-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.list-item:last-child {
  border-bottom: none;
}

</style>